<template>
	<div class="dialog-container">
		<el-dialog :visible.sync="showPassword" width="50%" :title="title" :before-close="handleClose">
			<el-form :model="formData" :inline="true":inline-message="true">
				<div class="modal-content">
					<table class="table-container">
						<tbody>
							<tr>
								<td class="td-label-2"><must/>用户名</td>
								<td colspan="3">
									{{formData.username}}
								</td>
							</tr>
							<tr>
								<td class="td-label-2"><must/>密码</td>
								<td>
									<el-input v-model="formData.password" v-validate="'required|max:20'" name="密码" show-password placeholder="请输入密码"></el-input>
									<span v-show="errors.has('密码')" style="color: red;">{{ errors.first('密码') }}</span>
								</td>
								<td class="td-label-2"><must/>确认密码</td>
								<td>
									<el-input v-model="confirmPassword" v-validate="'required|max:20'" name="确认密码" show-password placeholder="请输入确认密码"></el-input>
									<span v-show="errors.has('确认密码')" style="color: red;">{{ errors.first('确认密码') }}</span>
								</td>
							</tr>
						</tbody>

					</table>
				</div>
			</el-form>
			<div slot="footer">
				<el-button @click="handleClose" type="danger">关 闭</el-button>
				<el-button @click="handleSave" type="primary" :disabled="btnDisabled">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { updatePassword } from '@/api/sys/user/index';
	
	/* 工具 */
	import * as common from '@/utils/base/common';

	export default {
		/* 用户管理 - 修改密码页面  */
		name: 'user-password',
		data() {
			return {
				title: '修改密码',
				btnDisabled: false, //按钮禁用状态
				confirmPassword: '', // 确认密码
			}
		},
		props: ['restPath', 'showPassword', 'formData'],
		created() {
			this.initData()
		},
		methods: {
			initData(){
				this.formData.password = ''
			},

			/**
			 * 点击保存按钮
			 */
			handleSave() {
				this.$validator.validateAll().then((result) => {
					if (result) {
						if(this.confirmPassword === this.formData.password){
							let that_ = this
							updatePassword(this.formData).then(response => {
								if(response.code === 200){
									common.message(that_, 'success', 2, '修改密码成功!')
									that_.$emit('flushList') // 向父组件发送刷新事件
								}else{
									common.message(that_, 'warning', 2, response.message)
								}
							}).catch(err => {
								common.message(that_, 'error', 2, '调用接口失败!')
							})
						}else{
							common.tips(this, '两次密码不匹配！')
						}
					}else{
						common.tips(this, '有验证信息没有通过，请查看页面信息是否填写完整或正确！')
					}
				})
			},
			
			// 关闭弹出框
			handleClose() {
				this.$emit('closeDialog') // 向父组件发送关闭事件
			},
			
			
		} // methods end
	}
</script>

<style scoped>
	.dialog-container {
		width: 100%;
		height: 100%;
	}
	.dialog-container>>>.el-dialog__body {
		padding: 5px 15px;
	}
	
	.modal-content {
	    width: 100%;
		position: relative;
		background-color: #fff;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 6px;
		-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
		box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		padding: 5px;
	}
	
	/* table样式 */
	table {
	    width: 100%;
	    border-spacing: 0;
	    border-collapse: collapse;
	    empty-cell: show;
	}
	.table-container tbody td {
		padding: 4px 5px;
		border: 1px solid #c1dad7;
		vertical-align: middle;
	}
	.td-label-2 {
		width: 15%;
		text-align: right;
		line-height: 32px;
		background-color: #EFEFEF;
		word-break: keep-all;
	}
	
	
</style>